<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程状态修改</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getCourseList" @keyup.enter="getCourseList">
            <el-button slot="append" icon="el-icon-search" @click="getCourseList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="courselist" border stripe>
        <el-table-column label="课程编号" prop="id"></el-table-column>
        <el-table-column label="课程名称" prop="course_name"></el-table-column>
        <el-table-column label="课程介绍" prop="introduce"></el-table-column>
        <el-table-column label="幼儿要求" prop="requirement"></el-table-column>
        <el-table-column label="合作单位" prop="co_name"></el-table-column>
        <el-table-column label="创建人" prop="username"></el-table-column>
        <el-table-column label="基本费(元)" prop="teach_fee"></el-table-column>
        <el-table-column label="材料费(元)" prop="material_fee"></el-table-column>
       <el-table-column label="可选">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.cooperation_id" @change="userStateChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
                     :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
    export default {
        data() {
            return {
                // 获取用户列表的参数对象
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                courselist: [],
                total: 0
                }
        },
        created() {
            this.getCourseList()
        },
        methods: {
            async getCourseList() {
                const { data: res } = await this.$http.get('courseByAdmin/approved', {
                  params: this.queryInfo
                })
                if (res.code !== 200) {
                  return this.$message.error('获取用户列表失败！')
                }
                this.courselist = res.data.info
                console.log(this.courselist)
                for(let i in this.courselist){
                  if(this.courselist.status == "审定通过"){
                    this.courselist.cooperation_id = true

                  }else if(this.courselist.status == "审定失败"){
                    this.courselist.cooperation_id = false
                  }
                }
                console.log(this.courselist)
                this.total = res.data.total
            },
            // 监听 pagesize 改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.getCourseList()
            },
            // 监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage
                // this.getCourseList()
            },
            // 监听 switch 开关状态的改变
            async userStateChanged(userinfo) {
                // const { data: res } = await this.$http.put(
                //   `users/${userinfo.id}/state/${userinfo.mg_state}`
                // )
                // if (res.meta.status !== 200) {
                //   userinfo.mg_state = !userinfo.mg_state
                //   return this.$message.error('更新用户状态失败！')
                // }
                this.$message.success('更新用户状态成功！')
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
